<template>
    <div class="permissions-container">
        <FilterSearch
            :searchItems="searchItems"
            :showOtherButton="showOtherButton"
            :otherButtonText="otherButtonText"
            @query="handleQuery"
            @other="handleOther"
        />
        <AutoTable
            :tableData="tableData"
            :columns="columns"
            @operate="handleOperate"
        />
        <Pagination
            :total="total"
            :pageSize="pageSize"
            :currentPage="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <PluralEditDialog
            :title="title"
            :visible="pluralDialogVisible"
            :editModule="editModule"
            :editData="editData"
            @successCallBack="handlePluralEdit"
            @close="handleClose"
        />

    </div>
</template>
<script setup>
import './index.css';
import { reactive, ref, markRaw } from 'vue';
import { ElMessage } from 'element-plus';
import { Edit } from '@element-plus/icons-vue'

import FilterSearch from '@/components/filterSearch/index.vue';
import AutoTable from '@/components/autoTable/index.vue';
import Pagination from '@/components/pagination/index.vue';
import PluralEditDialog from '@/components/pluralEditDialog/index.vue';


import { permissionApi } from '@/api';

// FilterSearch params
const searchItems = ref([
    {
      label: '权限名称',
      vModel: 'name',
      type: 'input',
      initialValue: ''
    },
    {
      label: '权限编码',
      vModel: 'code',
      type: 'input',
      initialValue: ''
    },
]);  
const searchCache = ref({});
const showOtherButton = ref(true)
const otherButtonText = ref('同步')

// pluralEditDialog params
const pluralDialogVisible = ref(false);
const title = ref('api绑定');
const editModule = ref([
    {
        label: 'api路径',
        vModel: 'apiPath',
        type: 'input',
        placeholder: '如 action:method-apiPath',
        initialValue: ''
    },
]);
const editData = ref([]);


// AutoTable params
const tableData = ref([]);
const columns = ref([
    {
      label: '权限名称',
      prop: 'name',
      width: '180px'

    },
    {
      label: '权限编码',
      prop: 'code',
      width: '180px'
    },
    {
      label: 'api路径',
      prop: 'api_paths',
      type: 'tag',
      getTag: item =>item.split(':')[0],
      getTips: item =>item.split(':')[1],
    },
    {
      label: '操作',
      prop: 'operate',
      fixed: 'right',
      type: 'action',
      align: 'left',
      width: '80px',
      operate: [
        {label: '变更Api权限', type: 'edit', icon: markRaw(Edit)}, 
      ]
    }

]);

// Pagination params
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);



// filterSearch Api
const handleQuery = async (params) => {
    // 调用接口获取数据
    searchCache.value = params;
    const reqParams = {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        ...params
    }
    const res = await permissionApi.getPermission(reqParams);
    if (res.code === 200) {
      tableData.value = res.data.rows;
      total.value = res.data.total;
    }
};
const handleOther = async () => {
    const res = await permissionApi.syncMenuToPermission();
    if (res.code === 200) {
        ElMessage.success('同步成功');
        handleQuery();
    }
}

const handlePluralEdit = async (id, params) => {
    const data = {_id: id, apiPaths: params.map(item => item.apiPath)};
    const res = await permissionApi.bindPermission(data);
    if (res.code === 200) {
        pluralDialogVisible.value = false;
        ElMessage.success('api绑定变更成功！');
        handleQuery();
    }
}
const handleClose = () => {
    pluralDialogVisible.value = false;
}

// Pagination Api
const handleSizeChange = (size) => {
    pageSize.value = size;
    handleQuery(searchCache.value);
};
const handleCurrentChange = (page) => {
    currentPage.value = page;
    handleQuery(searchCache.value);

};

// AutoTable Api
const handleOperate = (type, row) => {
    if (type === 'edit') {
        const apiPaths = row.api_paths;
        if(apiPaths.length) editData.value = apiPaths.map(item => ({id: row._id, apiPath: item }));
        else editData.value = [{id: row._id, apiPath: '' }];
        pluralDialogVisible.value = true;
    }
}



</script>